<template>
  <div class="content-container" style="position: relative">
    <img class="system-logo-icon" src="@/assets/logo.png"></img>
    <div style="height: 10px"></div>
    <div class="panel" style="background-color: rgba(255,255,255,0.7);width: 1400px;margin-left: auto;margin-right: auto;padding-bottom: 10px;border-radius: 8px">
      <div >
        <img style="height: 50px;margin-top: 10px;margin-left: 5px" :src="insiData.logo" />
        <div style="text-align: center;font-weight: bold;color: #000000;font-size: x-large;line-height: 50px">{{insiData.pxjgmc}}</div>
        <div style="text-align: left;margin-left: 20px;margin-right:20px;font-size: large;background-color: white;padding-left: 20px;padding-right: 20px" >
          <div style="font-size: large;font-weight: bold;padding-top: 10px;">简介</div>
          <div v-html="insiData.jjnr00"></div>
        </div>
      </div>
       <div style="background-color: white;margin-left: 20px;margin-right: 20px;padding: 10px;">
         <div style="text-align: left;font-size: large;font-weight: bold;margin-left: 10px;padding-top: 10px;margin-bottom: 10px">联系方式</div>
         <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px">
           <span style="margin-left: 10px">联系人:&nbsp;&nbsp;{{insiData.lxrmc0}}</span>
         </div>
         <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px">
           <span style="margin-left: 10px">联系电话:&nbsp;&nbsp;{{insiData.zjhm00}}</span>
         </div>
         <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px">
           <span style="margin-left: 10px">手机号码:&nbsp;&nbsp;{{insiData.lxrdh0}}</span>
         </div>
         <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px">
           <span style="margin-left: 10px">地址:&nbsp;&nbsp;{{insiData.pxjgdz}}</span>
         </div>
       </div>

      <div style="background-color: white;margin-left: 20px;margin-right: 20px;margin-top: 20px ;margin-bottom: 20px;padding: 10px;">
        <div style="text-align: left;font-size: large;font-weight: bold;margin-left: 10px;padding-top: 10px;margin-bottom: 10px">学校课程</div>
        <div  style="display: flex;  flex-flow:row wrap;">
          <div v-for="(item,index) in courseData" :key="index"  @click="$router.push({path:'/course-detail',query:{kcxh00:item.kcxh00,pxjgxh:item.pxjgxh}})">
            <div style="width: 300px;margin-left: 10px">
              <img :src="item.kcfmwj" style="width: 300px;height: 200px;"/>
            </div>
            <div style="width: 300px;text-align: center;font-weight: bold">{{item.kcmc00}}</div>
          </div>
        </div>
      </div>
     </div>
  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {skillsTrainingApi} from "@/api";
import {institutionInfo} from "@/api/modules/skillsTrainingApi";
export default {
  name:"school-detail",
  components:{
    ReturnBtn
  },
  data(){
    return {
      insiData:"",
      courseData:[],
      dict:{
        kklx00:{
          "1":"随到随学",
          "2":"周末可"

        }
      },
      pxjgxh:""
    }
  },
  mounted() {

  },
  created() {
    this.pxjgxh=this.$route.query.pxjgxh
    this.queryInstitutionInfo()
    this.queryCourse()
  },
  methods: {
    queryCourse(){
      skillsTrainingApi.queryCourse({pxjgxh:this.pxjgxh, limit:100,page:1}).then((res) => {
        this.courseData=res.data.records
        console.log(this.courseData)
      }).catch(()=>{

      })
    },
    queryInstitutionInfo(){
      skillsTrainingApi.institutionInfo({pxjgxh:this.pxjgxh}).then((res) => {
        this.insiData=res.data
      }).catch(()=>{

      })
    }

  }
}
</script>
<style lang="scss" scoped>
.bg{
  width: 400px;
  z-index: -1;
  left: 10px;
  top: 150px;
  position: absolute;
}
</style>
